﻿{extend name="public:base" /}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="row search-form">
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="status">
                                <option value="0">请选择类型</option>
                                <option value="1" {:input('status') == 1 ? 'selected' : ''}>待审核</option>
                                <option value="2" {:input('status') == 2 ? 'selected' : ''}>已通过</option>
                                <option value="-1" {:input('status') == -1 ? 'selected' : ''}>已驳回</option>
                            </select>
                        </div>

                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group" style="width: 100%; display: flex; justify-content: space-between">
                                <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>姓名</th>
                                <th>手机号</th>
                                <th>合作说明</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="list" id="vo"}
                            <tr>
                                <td>{$vo.id}</td>
                                <td>{$vo.username}</td>
                                <td>{$vo.mobile}</td>
                                <td>{$vo.desc}</td>
                                <td>{$vo.status|getApplyStatus}</td>
                                <td class="project-actions">
                                    {if $vo.status == 1}
                                    <a href="{:url(applyAgree, ['id' => $vo.id])}" class="btn btn-white btn-sm ajax-operate"><i class="iconfont icon-success"></i> 通过
                                    </a>
                                    <a href="{:url(applyRefuse, ['id' => $vo.id])}" class="btn btn-white btn-sm ajax-operate"><i class="iconfont icon-refuse"></i> 驳回
                                    </a>
                                    {/if}
                                    {if $vo.status == 2}
                                    <div class="btn btn-white btn-sm" data-toggle="modal" data-target="#choose" onclick="setId(`{$vo.user_id}`)">
                                        <i class="iconfont icon-xinzeng"></i> 分配车辆
                                    </div>
                                    {/if}
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                        {if !empty($list)}{$list->render()}{/if}
                    </div>
                </div>
            </div>
        </div>
    </div>


    <style>
        .main {
            display: flex;
            flex-direction: column;
        }

        .module-box {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            overflow-y: scroll;
            max-height: 250px;
        }

        .module {
            margin-top: 10px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .checkbox-input {
            width: 40px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #e7eaec;
        }

        .checkbox-input input {
            margin: 13px;
            float: left;
        }

        .checkbox-name {
            text-align: left;
            height: 40px;
            line-height: 40px;
            border: 1px solid #e7eaec;
            border-left: 0;
            padding: 0 13px;
            margin-right: 10px;
        }
    </style>
    <div class="modal inmodal" id="choose" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="max-width: 700px;">
            <div class="modal-content animated flipInY">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">分配车辆</h4>
                </div>
                <div class="modal-body">
                    <div class="main">
                        <!-- 搜索框 -->
                        <div class="search-box mb-3">
                            <div class="input-group">
                                <input type="text" id="car_search" class="form-control" placeholder="搜索车型">
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="button" id="search_btn" style="margin-left: 10px">搜索</button>
                                </span>
                            </div>
                        </div>
                        <!-- 搜索结果统计 -->
                        <div class="search-result-count mb-2" style="color: #999;">
                            共 <span id="total_count">0</span> 辆可分配车辆
                        </div>

                        <div class="module">
                            <div class="checkbox-input">
                                <input class="all_check" type="checkbox" value="0">
                            </div>
                            <span class="checkbox-name">全选</span>
                        </div>
                        <div class="module-box">
                            <!-- 车辆数据将通过JavaScript动态加载 -->
                            <div style="text-align: center; padding: 20px; color: #999;">请选择意向后加载车辆数据</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="confirmSpread()">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/cropper-img-mask" cropper_uploaded_img_ids="cropper_uploaded_img_ids" cropper_uploaded_img_paths="cropper_uploaded_img_paths" crop_preview_box="crop-preview-box" /}{include file="public/preview-img-mask" swiper-id="cropper-preview" /}
{/block}

{block name="js"}
<script>

    // 搜索功能
    function searchCar() {
        var searchText = $('#car_search').val().toLowerCase();
        var visibleCount = 0;
        var totalCount = 0;

        $('#choose .module[data-model]').each(function () {
            var model = $(this).data('model').toLowerCase();
            totalCount++;

            if (searchText === '' || model.indexOf(searchText) !== -1) {
                $(this).show();
                visibleCount++;
            } else {
                $(this).hide();
                // 保留选中状态，只隐藏不符合条件的用户
                // 注释掉这行，避免取消选中状态
                // $(this).find('.single_check').prop('checked', false);
            }
        });

        // 更新搜索结果统计
        $('#total_count').text(visibleCount);

        // 更新全选框状态
        updateAllCheckStatus();
    }

    // 搜索按钮点击事件
    $('#search_btn').on('click', function(e) {
        // 阻止事件冒泡和默认行为，确保不会触发确认推广按钮的逻辑
        e.preventDefault();
        e.stopPropagation();
        searchCar();
    });

    // 搜索框回车事件
    $('#car_search').on('keyup', function (e) {
        if (e.key === 'Enter') {
            // 阻止事件冒泡和默认行为
            e.preventDefault();
            e.stopPropagation();
            searchCar();
        }
    });

    // 全选框点击事件
    $('#choose .all_check').on('click', function () {
        var isChecked = $(this).prop('checked');
        // 设置所有可见的单选框的状态与全选框一致
        $('#choose .module[data-model]:visible .single_check').prop('checked', isChecked);
    });

    // 单选框点击事件
    $('#choose .single_check').on('click', function () {
        updateAllCheckStatus();
    });

    // 初始化时检查全选状态
    updateAllCheckStatus();

    // 确认推广按钮点击事件
    $('#choose .btn-primary').on('click', function () {
        // 获取所有选中的用户ID
        var selectedIds = [];
        $('#choose .single_check:checked').each(function () {
            selectedIds.push($(this).val());
        });

        // 如果没有选择用户，可以给个提示
        /*if (selectedIds.length === 0) {
            layer.msg('请至少选择一个用户');
            return;
        }*/

        // 这里可以添加推广逻辑，比如将选中的用户ID传递给后端
        // 实际的confirmSpread函数应该会处理这个逻辑
    });

    // 当模态框显示时，重新检查全选状态
    $('#choose').on('shown.bs.modal', function () {
        updateAllCheckStatus();
        // 清空搜索框
        $('#car_search').val('');
        // 显示所有用户
        $('#choose .module[data-model]').show();
        // 更新统计
        $('#total_count').text($('#choose .module[data-model]').length);
    });

    // 点击module直接操作对应的checkbox
    $('#choose .module').on('click', function (e) {
        // 如果点击的是checkbox本身，则不处理，避免重复触发
        if ($(e.target).is('input[type="checkbox"]')) {
            return;
        }

        // 找到当前module中的checkbox
        var checkbox = $(this).find('input[type="checkbox"]');

        // 切换checkbox的选中状态
        checkbox.prop('checked', !checkbox.prop('checked'));

        // 如果是点击的单选框，更新全选框状态
        if (checkbox.hasClass('single_check')) {
            updateAllCheckStatus();
        } else if (checkbox.hasClass('all_check')) {
            // 如果是点击的全选框，同步所有可见的单选框状态
            var isChecked = checkbox.prop('checked');
            $('#choose .module[data-model]:visible .single_check').prop('checked', isChecked);
        }
    });

    // 为checkbox添加阻止冒泡的事件，防止点击checkbox时触发外层module的点击事件
    $('#choose .module input[type="checkbox"]').on('click', function (e) {
        e.stopPropagation();
    });


    /**
     * 更新全选框的状态
     */
    function updateAllCheckStatus() {
        var totalVisibleChecks = $('#choose .module[data-model]:visible .single_check').length;
        var checkedVisibleChecks = $('#choose .module[data-model]:visible .single_check:checked').length;

        // 如果所有可见的单选框都被选中，则选中全选框；否则取消选中
        $('#choose .all_check').prop('checked', totalVisibleChecks > 0 && totalVisibleChecks === checkedVisibleChecks);
    }

    var user_id = 0;

    function setId(choose_id) {
        user_id = choose_id;
        // 加载车辆数据
        loadUserData(user_id);
    }

    function loadUserData(user_id) {
        // 清空现有用户列表
        $('.module-box').html('');
        $('#total_count').text('0');

        // 显示加载状态
        $('.module-box').html('<div style="text-align: center; padding: 20px; color: #999;">正在加载车辆数据...</div>');

        // 请求接口获取车辆数据
        $.post("/index/index/getCarList", {user_id}, function(res) {
            // 清空加载状态
            $('.module-box').html('');

            if (res.result == 1 && res.data && res.data.length > 0) {
                // 填充车辆数据
                var carData = res.data;
                $('#total_count').text(carData.length);

                carData.forEach(function(user) {
                    // 检查team_user_id是否大于0，是的话设置checked属性
                    var checkedAttr = user.team_user_id && user.team_user_id > 0 ? 'checked="checked"' : '';

                    var module = $('<div class="module" data-model="' + user.model + '">');
                    module.append('<div class="checkbox-input"><input name="ids[]" class="single_check" type="checkbox" value="' + user.id + '" ' + checkedAttr + '></div>');
                    module.append('<span class="checkbox-name">' + user.model + '</span>');
                    $('.module-box').append(module);
                });

                // 重新绑定事件
                bindModuleEvents();
            } else {
                // 没有数据时显示提示
                $('.module-box').html('<div style="text-align: center; padding: 20px; color: #999;">暂无车辆数据</div>');
            }

            // 更新全选框状态
            updateAllCheckStatus();
        }, 'json').fail(function() {
            // 请求失败时显示提示
            $('.module-box').html('<div style="text-align: center; padding: 20px; color: #999;">加载车辆数据失败，请稍后重试</div>');
        });
    }

    function bindModuleEvents() {
        // 为新加载的module元素绑定点击事件
        $('#choose .module[data-model]').on('click', function (e) {
            // 如果点击的是checkbox本身，则不处理，避免重复触发
            if ($(e.target).is('input[type="checkbox"]')) {
                return;
            }

            // 找到当前module中的checkbox
            var checkbox = $(this).find('input[type="checkbox"]');

            // 切换checkbox的选中状态
            checkbox.prop('checked', !checkbox.prop('checked'));

            // 如果是点击的单选框，更新全选框状态
            if (checkbox.hasClass('single_check')) {
                updateAllCheckStatus();
            }
        });

        // 为新加载的checkbox绑定阻止冒泡事件
        $('#choose .module[data-model] input[type="checkbox"]').on('click', function (e) {
            e.stopPropagation();
        });

        // 为单选框绑定状态更新事件
        $('#choose .single_check').on('click', function () {
            updateAllCheckStatus();
        });
    }

    function confirmSpread() {
        // 获取所有选中的用户ID
        var selectedIds = [];
        $('#choose .single_check:checked').each(function () {
            selectedIds.push($(this).val());
        })
        if (selectedIds.length === 0) {
            layer.msg('请选择用户');
        }

        $.post("{:url('/admin/manage/allocateUserToCar')}", {user_id: user_id, car_ids: selectedIds}, function (res) {
            if (res.result == 1) {
                layer.msg(res.msg);
                setTimeout(function () {
                    window.location.reload();
                }, res.timer)
            } else {
                layer.msg(res.msg)
            }
        }, 'json')
    }

</script>
{/block}